<template>
  <div>
    <sort-bar>
      <template v-slot:left>
        <div class="rec-title">
          <img src="@/assets/img/index.png" alt />
          新碟上架
        </div>
      </template>
      <template v-slot:right>更多&nbsp;&gt;</template>
    </sort-bar>
    <loader v-if="!newList"></loader>
    <div class="new-list" v-else>
      <button class="left" v-show="leftCanClick" @click="leftClick">&lt;</button>
      <div class="swiper">
        <div class="content">
          <ul>
          <li v-for="item in newList" :key="item.id">
            <div class="img">
              <img :src="item.blurPicUrl" :alt="item.name" :title="item.name" />
            </div>
            <div class="title">
              <p>{{item.name}}</p>
              <p>{{item.artist.name}}</p>
            </div>
          </li>
        </ul>
        </div>
      </div>
      <button class="right" v-show="rightCanClick" @click="rightClick">&gt;</button>
    </div>
  </div>
</template>

<script>
import SortBar from "@/components/content/sortbar/SortBar";
import Loader from '@/components/common/loader/Loader'

export default {
  components: {
    SortBar,
    Loader
  },
  props: {
    newList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      leftCanClick: false,
      rightCanClick: true,
      index: 1,
    }
  },  
  methods: {
    // 实现按钮是否显示和点击轮播
    leftClick() {
      if (this.index >= 2) {
        // 根据index，点击一次移动相应的距离(要想实现左右移，index必须差2)
        document.querySelector(".content").style.transform = "translate(-"+(this.index-2)*130+"px)";
        this.index--;
        // 左移至少一次以后，右边按钮可以点击
        this.rightCanClick = true;
      } 
      // 按钮必须提前终止
      if(this.index < 2) {
        this.leftCanClick = false;
      }
    },
    rightClick() {
      if (this.index <= this.newList.length-5) {
        document.querySelector(".content").style.transform = "translate(-"+this.index*130+"px)";
        this.index++;
        this.leftCanClick = true;
      } 
      if(this.index === this.newList.length-4) {
        this.rightCanClick = false;
      }
    },
  },
};
</script>

<style scoped>
/* 新碟上架标题 */
.rec-title {
  display: flex;
  align-items: center;
}
.rec-title img {
  height: 14px;
  width: 14px;
  margin-right: 5px;
}

/* 背景区域 */
.new-list {
  position: relative;
  width: 100%;
  height: 190px;
  margin: 20px 0;
  padding-top: 20px;
  background-color: #4f4f4f;
}

.swiper {
  overflow: hidden;
  width: 650px;
  height: 140px;
  margin: 0 auto;
}
.content {
  transition: all 0.5s;
}

/* 图片 */
ul {
  width: 1560px;
  height: 135px;
}
li {
  float: left;
}
li img {
  width: 100px;
  height: 100px;
}
.img {
  width: 130px;
  background: url(~@/assets/img/bg.png) 0 -570px;
}

/* 标题格式 */
.title p {
  width: 100px;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: #fff;
}

/* 左右两个箭头 */
.left,
.right {
  position: absolute;
  z-index: 9;
  top: 55px;
  cursor: pointer;
  width: 20px;
  height: 40px;
  border: none;
  outline: none;
  background-color: #4f4f4f;
  color: #fff;
  font-size: 24px;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
</style>